<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head th:replace="_fregments::head(~{::title})">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>标签管理</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="../../static/lib/bootstrap-3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/css/my.css">
    <!-- 动画 -->
    <link rel="stylesheet" href="../../static/css/animate.css">
    <!-- bootstrap-bootstrapValidator-->
    <link rel="stylesheet" href="../../static/lib/bootstrapValidator/bootstrapValidator.min.css">
</head>

<body>
<nav th:replace="_fregments::menu(3)" class="navbar navbar-default navbar-fixed-top m-padding">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img alt="Brand" src="../../static/favicon.ico" style="width: 24px;">
            </a>
            <p class="navbar-text navbar-default"><a href="#" class="navbar-link m-a-none"><b>后台管理</b></a></p>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="index.html"><span class="glyphicon glyphicon-home">&nbsp;</span>首页</a></li>
                <li><a href="navigation.html"><span class="glyphicon glyphicon-tasks">&nbsp;</span>导航管理</a></li>
                <li class="active"><a href="tag.html"><span class="glyphicon glyphicon-tag">&nbsp;</span>标签管理</a>
                </li>
                <li><a href="link.html"><span class="glyphicon glyphicon-link">&nbsp;</span>链接管理</a></li>
                <li role="presentation" class="disabled"><a href="#"><span
                        class="glyphicon glyphicon-bookmark">&nbsp;</span>书签管理</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">
                        <img class="m-avatar img-circle" src="../../static/images/me.jpg">
                        挚夕
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-left">
                        <li><a href="#"><span class="glyphicon glyphicon-th">&nbsp;</span>个人主页</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#"><span class="glyphicon glyphicon-log-out">&nbsp;</span>登出</a></li>
                    </ul>
                </li>
            </ul>

            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="搜索" style="width: 300px;">
                </div>
                <button type="submit" class="btn btn-default">
                    <a class="glyphicon glyphicon-search m-none"></a>
                </button>
            </form>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div class="m-margin-top">
    <!-- 添加/修改模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改一级导航</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="input-modal-hidden">
                    <div class="form-group">
                        <input id="input-modal-name" placeholder="标签名称"  name="inputModalName" class="form-control" required autofocus>
                    </div>
                    <label for="select-modal-label" style="margin-top: 10px">选择标签样式</label>
                    <select id="select-modal-label" class="form-control form-control-placeholder" autofocus>
                        <option value="label label-default">默认(灰色)</option>
                        <option value="label label-primary">蓝色</option>
                        <option value="label label-success">绿色</option>
                        <option value="label label-warning">浅黄色</option>
                        <option value="label label-danger">红色</option>
                    </select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="btn-modal-save" type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>


    <div class="m-container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-5 col-sm-4 col-md-3">
                        <input placeholder="标签名称" id="input-search" class="form-control m-input">
                    </div>
                    <div class="col-xs-7 col-sm-8 col-md-3">
                        <button type="submit" class="btn btn-danger btn-sm" id="btn-clear">
                            清空
                        </button>
                        <button type="submit" class="btn btn-success btn-sm" id="btn-search">
                            <span class="glyphicon glyphicon-search m-none">&nbsp;</span>搜索
                        </button>
                        <button id="btn-add" type="button" class="btn btn-success btn-sm" data-toggle="modal"
                                data-target="#myModal" data-title="新增标签">新增
                        </button>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <table class="table table-hover">
                    <thead>
                    <td>#</td>
                    <td>标签名称</td>
                    <td>操作</td>
                    </thead>
                    <tbody id="tag-tbody">
                    <tr th:each="tag,it : ${tags}">
                        <td th:text="${it.count}">1</td>
                        <td>[[${tag.name}]]&nbsp;<span th:text="${tag.linkCnt}" class="badge">14</span></td>
                        <td>
                            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                    data-target="#myModal" data-title="修改标签" th:data-id="${tag.id}">修改
                            </button>
                            <button type="button" class="btn btn-danger btn-sm btn-delete" id="btn-delete" th:data-name="${tag.name}" th:data-id="${tag.id}">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="panel-footer m-align-right">

            </div>
        </div>
    </div>
</div>
<br><br><br><br><br><br><br><br><br><br><br>
<footer th:replace="_fregments :: footer">
    <div>
        <div class="row">
            <div class="col-sm-4 col-md-4">
                <h3>挚夕导航</h3>
                <p>
                    挚夕导航最初源于本人想要做一个管理书签的系统。<br>
                    后来借鉴了一些导航网站，决定做一个网站导航。<br>
                    前端使用BootStrap。
                </p>
            </div>
            <div class="col-sm-8 col-md-8">
                占位
            </div>
        </div>
    </div>

    <div style="text-align: center;">
        Copyright 2023-now 挚夕导航 Designed by 挚夕
    </div>
</footer>

<!--/*/<th:block th:replace="_fregments :: script">/*/-->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../../static/lib/jquery-1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../../static/lib/bootstrap-3.4.1/js/bootstrap.min.js"></script>
<!--  bootstrap-dropdown-hover -->
<script src="../../static/lib/bootstrap-dropdown-hover.js"></script>
<script src="../../static/lib/toastr/toastr.min.js"></script>
<!-- bootstrap-bootstrapValidator-->
<script src="../../static/lib/bootstrapValidator/bootstrapValidator.min.js"></script>
<script src="../../static/lib/bootstrapValidator/zh_CN.js"></script>
<script>
    $(function () {
        //bootstrap-dropdown-hover
        $('.navbar [data-toggle="dropdown"]').bootstrapDropdownHover({
            // see next for specifications
        });
        //特效
        $("li").hover(function () {
            $(this).toggleClass("m-up");
        })
    })
</script>
<!--/*/</th:block>/*/-->
<script>
    $(function () {
        //表单校验
        $('#myModal').bootstrapValidator({
            excluded: [":disabled", ":hidden"], // 关键配置，表示只对于禁用域不进行验证，其他的表单元素都要验证
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                inputModalName: {
                    validators: {
                        notEmpty: {
                            message: '标签名不能为空'
                        }
                    }
                }
            }
        });
        // 一级导航模块 清空按钮
        $("#btn-clear").click(function () {
            $("#input-search").val('');
        });

        //模态框
        $('#myModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // Button that triggered the modal
            var title = button.data('title') // Extract info from data-*
            var id = button.data('id')
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this)
            modal.find('.modal-title').text(title)
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            if (id != null) {
                //查标签数据
                modal.find('#input-modal-hidden').val(id);
                $.ajax({
                    type: "get",
                    url: "[[@{/admin/tag/get}]]",
                    data: {
                        id: id
                    },
                    success: function (response) {
                        modal.find('#input-modal-name').val(response.data.name);
                        modal.find('#input-modal-label').val(response.data.labelClass);
                    }
                })
            }
        });
        //点击新增按钮清空模态框
        $("#btn-add").click(function () {
            $("#input-modal-hidden").val(null);
            $("#input-modal-name").val('');
            //下拉框选第一个
            // $("#select-modal-label option:first").prop('checked', true);//没用
            var firstVal = $("#select-modal-label option:first").val();
            $("#select-modal-label").val(firstVal);
        });

        //新增/修改
        $("#btn-modal-save").click(function () {
            var bootstrapValidator = $('#myModal').data("bootstrapValidator").validate();
            if (!bootstrapValidator.isValid()) return;
            //收集数据
            var id = $("#input-modal-hidden").val();
            var name = $("#input-modal-name").val().trim();
            var labelClass = $("#select-modal-label").val();
            //有id为更新，否则为新增
            $.ajax({
                type: id ? "put" : "post",
                url: id ? "[[@{/admin/tag/update}]]" : "[[@{/admin/tag/add}]]",
                data: {
                    id: id,
                    name: name,
                    labelClass: labelClass
                },
                success: function (response) {
                    if (response.status == "success") {
                        //关闭模态框
                        $("#myModal").modal("hide");
                        //提示信息
                        var msg = id ? "更新成功!" : "新增成功!";
                        toastr.success(msg, '提示');
                        //更新表格数据
                        reload();
                        //重置表单
                        $('#myModal').bootstrapValidator('resetForm');
                    } else {
                        toastr.error(response.data.errorMessage, '错误');
                    }
                },
                error: function (response) {
                    toastr.error(response.responseText, "请求失败");
                }
            })
        });

        //重新加载表格数据
        function reload() {
            $.ajax({
                type: "get",
                url: "[[@{/admin/tag/list}]]",
                success: function (response) {
                    if (response.status == "success") {
                        var htmlStr = "";
                        $.each(response.data, function (index, obj) {
                            htmlStr += "<tr>";
                            htmlStr += "<td>" + (index + 1) + "</td>";
                            htmlStr += "<td>" + obj.name + "&nbsp;<span class=\"badge\">" + obj.linkCnt + "</span></td>";
                            htmlStr += "<td>";
                            htmlStr += "<button type=\"button\" class=\"btn btn-primary btn-sm\" data-toggle=\"modal\" data-target=\"#myModal\" data-title=\"修改标签\" data-id='" + obj.id + "'>修改</button>&nbsp;";
                            htmlStr += "<button type=\"button\" class=\"btn btn-danger btn-delete btn-sm\" id=\"btn-delete\" data-name='" + obj.name  +"' data-id='" + obj.id + "'>删除</button>";
                            htmlStr += "</td>"
                            htmlStr += "<tr>";
                        });
                        $("#tag-tbody").html(htmlStr);
                    }
                }
            })
        }

        //删除
        $("#tag-tbody").on('click', ".btn-delete", function (){
            var id = $(this).data('id');
            var name = $(this).data('name');
            swal({
                title: "提示",
                text: "确认删除" + " <" + name + "> " + "吗?",
                icon: "warning",
                dangerMode: true,
                buttons: ['取消', '确认']
            }).then(function (willDelete) {
                if (willDelete) {
                    $.ajax({
                        type: 'delete',
                        url: '[[@{/admin/tag/delete/}]]' + id,
                        success: function (response) {
                            if (response.status == 'success') {
                                //清空搜索条件
                                $("#first-nav-input").val('');
                                $("#second-nav-input").val('');
                                $("#second-nav-select").val(-1);
                                //刷新列表数据
                                reload();
                                swal("删除成功！", {
                                    icon: "success",
                                });
                            } else {
                                swal("删除失败:" + response.data.errorMessage, {
                                    icon: "error",
                                    buttons: "确认"
                                });
                            }
                        },
                        error: function (response) {
                            toastr.error(response.data.errorMessage, '错误');
                        }
                    })
                } else {
                    swal("操作取消", {
                        icon: "info",
                        button: "确认",
                    });
                }
            });
        });//删除

        //搜索
        $("#btn-search").click(function (){
            //搜集参数
            var name = $("#input-search").val().trim();
            $.ajax({
                type:'get',
                url: "[[@{/admin/tag/search}]]",
                data:{
                    name : name
                },
                success : function (response){
                    if (response.status == "success") {
                        //更新表格
                        var htmlStr = "";
                        $.each(response.data, function (index, obj) {
                            htmlStr += "<tr>";
                            htmlStr += "<td>" + (index + 1) + "</td>";
                            htmlStr += "<td>" + obj.name + "&nbsp;<span class=\"badge\">" + obj.linkCnt + "</span></td>";
                            htmlStr += "<td>";
                            htmlStr += "<button type=\"button\" class=\"btn btn-primary btn-sm\" data-toggle=\"modal\" data-target=\"#myModal\" data-title=\"修改标签\" data-id='" + obj.id + "'>修改</button>&nbsp;";
                            htmlStr += "<button type=\"button\" class=\"btn btn-danger btn-delete btn-sm\" id=\"btn-delete\" data-name='" + obj.name  +"' data-id='" + obj.id + "'>删除</button>";
                            htmlStr += "</td>"
                            htmlStr += "<tr>";
                        });
                        $("#tag-tbody").html(htmlStr);
                    }
                }
            })
        })
    });
</script>
</body>

</html>